<style lang="scss" scoped>
.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px;
    margin-bottom: 2px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
   .header-left {
      width: 50px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
   .header-center {
      width: 70px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 15px;
      }
    }
   .header-right {
      width: 50px;
      height: 100%;
    }
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
   .user {
      width: 100%;
      height: 60px;
      margin-bottom: 5px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-left {
        flex: 1;
        height: 100%;
        margin-left: 16px;
        display: flex;
        align-items: center;
        p {
          margin-left: 16px;
          font-size: 16px;
          color: #717171;
        }
       .userimg {
          width: 40px;
          height: 40px;
          border: 1px solid #ccc;
          border-radius: 50%;
        }
      }
     .user-right {
        width: 35px;
      }
    }
   .password {
      width: 100%;
      height: 45px;
      margin-bottom: 5px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
     .password-left {
        p {
          color: #717171;
          font-size: 13px;
          margin-left: 18px;
        }
      }
     .password-right {
        width: 35px;
      }
    }
   .tableone {
      width: 100%;
      height: 135px;
      margin-bottom: 5px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
     .clear {
        width: 90%;
        height: 45px;
        border-bottom: 0.5px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .clear-left {
          p {
            color: #717171;
            font-size: 13px;
          }
        }
       .clear-right {
          width: 50px;
          margin-right: 2.5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
     .liangdu {
        width: 90%;
        height: 45px;
        border-bottom: 0.5px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .liangdu-left {
          p {
            color: #717171;
            font-size: 13px;
          }
        }
       .liangdu-right {
          margin-right: 4px;
        }
      }
     .jiance {
        width: 90%;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .jiance-left {
          p {
            color: #717171;
            font-size: 13px;
          }
        }
       .jiance-right {
          margin-right: 4px;
        }
      }
    }
   .tabletwo {
      width: 100%;
      height: 90px;
      background-color: #fff;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
     .help {
        width: 90%;
        height: 45px;
        border-bottom: 0.5px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .help-left {
          p {
            font-size: 13px;
            color: #717171;
          }
        }
       .help-right {
          margin-right: 4px;
        }
      }
     .guanmy {
        width: 90%;
        height: 45px;
        border-bottom: 0.5px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .guanmy-left {
          p {
            font-size: 13px;
            color: #717171;
          }
        }
       .guanmy-right {
          margin-right: 4px;
        }
      }
    }
   .invite {
      width: 100%;
      height: 45px;
      margin-bottom: 5px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
     .invite-left {
        p {
          color: #717171;
          font-size: 13px;
          margin-left: 18px;
        }
      }
     .invite-right {
        margin-right: 23px;
      }
    }
   .exit {
      width: 100%;
      height: 45px;
      margin-bottom: 5px;
      button {
        width: 100%;
        height: 100%;
        border: none;
        background-color: #fff;
        font-size: 13px;
        color: rgb(231, 109, 109);
      }
    }
   .kongbai {
      width: 100%;
      flex: 1;
      background-color: #fff;
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <van-icon @click="onClickLeft" style="font-size: 35px" name="arrow-left" />
      </div>
      <div class="header-center">
        <p>设置</p>
      </div>
      <div class="header-right"></div>
    </header>
    <main>
      <div @click="user" class="user">
        <div class="user-left">
          <div class="userimg">
            <img
              style="width: 100%; height: 100%; border-radius: 50%"
              :src="headPic"
              alt=""
            />
          </div>
          <div><p>{{ namevalue }}</p></div>
        </div>
        <div class="user-right">
          <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
        </div>
      </div>
      <div class="password" @click="xgpwd">
        <div class="password-left">
          <p>修改密码</p>
        </div>
        <div class="password-right">
          <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
        </div>
      </div>
      <div class="tableone">
        <div class="clear">
          <div class="clear-left">
            <p>清除缓存</p>
          </div>
          <div class="clear-right">
            <p style="color: #717171;">10M</p>
            <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
          </div>
        </div>
        <div class="liangdu" @click="liangdu">
          <div class="liangdu-left">
            <p>屏幕亮度</p>
          </div>
          <div class="liangdu-right">
            <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
          </div>
        </div>
        <div class="jiance" @click="jiance">
          <div class="jiance-left">
            <p>版本监测</p>
          </div>
          <div class="jiance-right">
            <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
          </div>
        </div>
      </div>
      <div class="tabletwo">
        <div class="help">
          <div class="help-left">
            <p>帮助中心</p>
          </div>
          <div class="help-right">
            <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
          </div>
        </div>
        <div class="guanmy">
          <div class="guanmy-left">
            <p>关于我们</p>
          </div>
          <div class="guanmy-right">
            <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
          </div>
        </div>
      </div>
      <div class="invite" @click="invite">
        <div class="invite-left">
          <p>邀请好友</p>
        </div>
        <div class="invite-right">
          <van-icon style="font-size: 30px;color: #717171;" name="arrow" />
        </div>
      </div>
      <div class="exit">
        <button @click="exit">退出登录</button>
      </div>
      <div class="kongbai"></div>
    </main>
    <footer></footer>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import { ref } from 'vue';

// const namevalue = ref(localStorage.getItem("nickname" || "欧若拉"));
const namevalue = ref(localStorage.getItem("userName"))
const headPic = ref(localStorage.getItem("headpic" || ""))
const onClickLeft = () => {
  router.push('/my')
}
const xgpwd = () => {
  router.push('/xgpwd')
}
const user = () => {
  router.push('/userchild')
}
const exit = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userId')
  localStorage.removeItem('sessionId')
  localStorage.removeItem('result')
  localStorage.removeItem('localEmail')
  localStorage.removeItem('userName')
  localStorage.removeItem('nickName')
  localStorage.removeItem('headPic')
  router.push('/login')
}
const invite = () => {
  router.push('/invitefriend')
}
const liangdu = () => {
  router.push('/pmldu')
}
const jiance = () => {
  router.push('/bbjce')
}
</script>
